import { defineComponent, reactive } from 'vue'
import source from '../style/source.module.scss'
export default defineComponent({
  props: {},
  emits: [],
  components: {},
  setup(props, ctx) {
    const data = reactive({
      tableData: [
        {
          type: '汽车',
          name: '大黄蜂'
        },
        {
          type: '火车',
          name: '擎天柱'
        }
      ]
    })
    const header = [
      {
        prop: '',
        label: '序号'
      },
      {
        prop: 'type',
        label: '车型'
      },
      {
        prop: 'name',
        label: '名称'
      }
    ]
    const tableRender = (item, index) => {
      if (item.label === '序号')
        return <el-table-column label={item.label} width="70px" align="center" type="index" />
      else return <el-table-column prop={item.prop} label={item.label} />
    }
    return () => (
      <>
        <div class={source.view_form}>
          <el-table data={data.tableData} border>
            {header.map((item, index) => tableRender(item, index))}
          </el-table>
        </div>
      </>
    )
  }
})
